<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script> <!-- 确保使用 bootstrap.bundle.min.js 包含 Popper.js -->
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style type="text/css">
    .clubSystem {
        width: 1100px;
        margin: auto;
    }
    .clubSystemHead > div:first-child {
        font-size: 20px;
        font-weight: bold;
        line-height: 50px;
    }
    /*去浮动*/
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }

    .pagination li {
        list-style-type: none;
        display: inline-block;
        margin-right: 5px;
    }
    .pagination button {
        border: none;
        background-color: #f8f9fa;
        color: #007bff;
        padding: 5px 10px;
        cursor: pointer;
    }
    .pagination button:hover {
        background-color: #e9ecef;
    }
    .pagination .active button {
        background-color: #007bff;
        color: white;
    }
    .pagination .disabled button {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
    }

    .studentCss {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .studentCss img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .studentRole {
        font-size: 14px;
        color: gray;
    }
    .studentActions {
        /*float: right;*/
    }
</style>
<body>
<div class="clubSystem" id="clubSys">
    <div class="clubSystemHead clear" style="height: 50px;">
        <div>全体成员</div>
    </div>
    <div v-for="(student, index) in paginatedStudents" :key="index" class="studentCss clear">
        <div>
            <img :src="'img/head/'+student.head">
        </div>
        <div class="studentInfo">
            <div>{{ student.studentName }}</div>
            <div class="studentRole">{{ getRoleName(student.role) }}</div>
        </div>
        <div class="studentActions" style="margin-left: 600px">
            <button v-if="loginUserRole == 1 && student.role == 3" @click="setAsAdmin(student.studentId)" class="btn btn-primary">设为管理员</button>
            <button v-if="loginUserRole == 1 && student.role == 2" @click="removeAdmin(student.studentId)" class="btn btn-secondary">取消管理员</button>
            <button v-if="(loginUserRole == 1 || loginUserRole == 2) && student.role != 1" @click="removeStudent(student.studentId)" class="btn btn-danger">退社</button>
        </div>
    </div>
    <ul class="pagination">
        <li :class="{ disabled: currentPage === 1 }">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        </li>
        <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
            <button @click="changePage(page)">{{ page }}</button>
        </li>
        <li :class="{ disabled: currentPage === totalPages }">
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    $(function () {
        let clubId = getData().clubId; // 假设 getData() 是获取 clubId 的函数

        function LoginVerify() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "loginVerify",
                    type: "get",
                    dataType: "json",
                    success: function(response) {
                        if (response.state == 300) {
                            alert(response.message);
                            window.location.href = "login.html";
                        } else {
                            resolve(response.data.loginUser);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function setMan(role,studentId){
            $.ajax({
                url:"setMan/"+role+"/"+clubId+"/"+studentId,
                type:"post",
                success:function (){
                    console.log("成功")
                }
            })
        }

        function getStudents() {
            // 获取学生列表
            $.ajax({
                url: "clubStudents/" + clubId,
                type: "get",
                dataType: "json",
                success: function (req) {
                    app.students = req.sort((a, b) => a.role - b.role); // 按 role 排序
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching students:", xhr.responseText);
                }
            });
        }

        getStudents();
        let app = new Vue({
            el: "#clubSys",
            data: {
                students: [],
                currentPage: 1,
                itemsPerPage: 10, // 每页显示的学生数量
                loginUserRole: null // 登录用户角色
            },
            computed: {
                totalPages() {
                    return Math.ceil(this.students.length / this.itemsPerPage);
                },
                paginatedStudents() {
                    const start = (this.currentPage - 1) * this.itemsPerPage;
                    const end = start + this.itemsPerPage;
                    return this.students.slice(start, end);
                }
            },
            methods: {
                changePage(page) {
                    if (page >= 1 && page <= this.totalPages) {
                        this.currentPage = page;
                    }
                },
                getRoleName(role) {
                    switch (role) {
                        case 1:
                            return '社长';
                        case 2:
                            return '管理员';
                        case 3:
                            return '社员';
                        default:
                            return '未知角色';
                    }
                },
                async initialize() {
                    try {
                        let user = await LoginVerify();
                        let userId = user.studentId;

                        // 合并 AJAX 请求以获取用户角色和学生列表
                        $.ajax({
                            url: "loginClubStudent/" + userId + "/" + clubId,
                            type: "get",
                            dataType: "json",
                            success: (response) => {
                                console.log("Response from server:", response); // 添加日志输出
                                if (response.studentName && response.studentName.length > 0) {
                                    this.loginUserRole = response.role;
                                } else {
                                    //console.log(response);
                                    window.alert("你并非该社团学生");
                                    location.href = "/boot";
                                }
                            },
                            error: (xhr, status, error) => {
                                //console.log(response);
                                window.alert("你并非该社团学生");
                                location.href = "/boot";
                            }
                        });

                    } catch (error) {
                        console.error("Error verifying login:", error);
                    }
                },
                setAsAdmin(studentId) {
                    // 发送请求将学生设为管理员
                    console.log(`Setting student ${studentId} as admin`);
                    // 这里可以添加实际的 AJAX 请求
                    if (confirm('确定要将该学生设为管理员吗？')) {
                        setMan(2, studentId);
                        getStudents();
                        location.reload()
                    }

                },
                removeAdmin(studentId) {
                    // 发送请求取消学生的管理员权限
                    console.log(`Removing admin rights from student ${studentId}`);
                    // 这里可以添加实际的 AJAX 请求
                    if (confirm('确定要取消该学生设为管理员权限吗？')) {
                        setMan(3, studentId);
                        getStudents();
                        location.reload()
                    }
                },
                removeStudent(studentId) {
                    // 发送请求让学生退社
                    console.log(`Removing student ${studentId} from the club`);
                    // 这里可以添加实际的 AJAX 请求
                    if (confirm('确定要将该学生移出社团吗？')) {
                        $.ajax({
                            url: "deleStu/" + clubId + "/" + studentId,
                            type: "post",
                            success: function () {
                                console.log("成功")
                            }
                        })
                        getStudents();
                        location.reload()
                    }
                }
            },
            mounted() {
                this.initialize(); // 初始化登录用户角色
            }
        });
    });
</script>